<template>
	<view>
		<!-- 标签名称 -->
		<view class="input_container">
			<input type="text" placeholder="标签名称" maxlength="10" v-model="tagName">
		</view>


		<!-- 选择标签颜色 -->
		<view class="tag_item" @click="$refs.popup.open()">
			<!-- 左 -->
			<view class="tag_item_left">
				<image src="@/static/index/tags_manage/color.png"></image>
				<view class="tag_name">颜色</view>
			</view>
			<!-- 右 -->
			<view class="tag_item_right" :style="{'background-color': colorList[colorIndex]}"></view>
		</view>
		
		<!-- 完成、取消按钮 -->
		<view class="btn_area">
			<view class="btn_item btn_delete" @click="deleteClick()" :class="{'btn_delete_hidden' : mode === 'add'}">删除</view>
			
			<view class="btn_area_right">
				<view class="btn_item btn_left" @click="$navigateBack()">取消</view>
				<view class="btn_item btn_right" @click="submitClick()">完成</view>
			</view>
			
		</view>

		<popup type="center" ref="popup">
			<view class="popcontainer">
				
				<view class="title">选择颜色</view>
				
				<view class="color_list">
					
					<view class="color_item" v-for="(item, index) in colorList" @click="colorIndex = index; $refs.popup.close()" :style="{'background-color': item}">
						<image src="@/static/index/tags_manage/selected.png" v-show="colorIndex === index"></image>
					</view>
					
				</view>
				
				
				<view class="cancel_btn_box">
					<view class="cancel_btn" @click="$refs.popup.close()">取消</view>
				</view>

			</view>
		</popup>

	</view>
</template>

<script>
	import popup from '@/components/uni-popup/uni-popup.vue'

	export default {
		components: {
			popup
		},
		onLoad(query) {
			
			// 获取需要加载的页面形式
			this.mode = query.mode || 'add'
			
			if(this.mode === 'add') {	
				// 加载添加标签页面
				uni.setNavigationBarTitle({ title:'添加标签' })
			}
			else if (this.mode === 'update') {
				// 加载更新标签页面
				uni.setNavigationBarTitle({ title:'编辑标签' })
				
				this.tagId = query.id
				this.getTagDetail()
			}
			
		},
		data() {
			return {
				// 颜色选择器
				colorIndex: 0,
				colorList: [
					'#930000',
					'#B45F06',
					'#BF9002',
					'#73761D',
					'#38761D',
					
					'#E13E39',
					'#E69138',
					'#F1C231',
					'#A0BB31',
					'#6CBE5E',
					
					'#2A9364',
					'#134F5C',
					'#134397',
					'#491C75',
					'#731B63',
					
					'#3BB780',
					'#2AA6C1',
					'#3876E4',
					'#9842EB',
					'#BE3B83',
				],
				
				mode: 'add',	 // 页面加载模式
				tagName: '', // 标签名称
				tagId: '',	 // 标签id
			};
		},
		methods: {
			// 删除标签点击
			deleteClick() {
				uni.showModal({
				    title: '提示',
				    content: '是否要删除该标签？',
				    success: res => {
				        if (res.confirm) {
							
							this.$http_json({
								url: "/api/tag/delete",
								method: "post",
								data: {
									tagId: this.tagId
								}
							}).then(result => {
								console.log(result)
								// todo
								this.$showToast({
									title: '删除成功'
								})
								
								setTimeout(() => {
									this.$navigateBack()
								}, 1000)
							})
							
				        }
				    }
				});
			},
			// 获取标签详情
			getTagDetail() {
				
				// 发起网络请求
				this.$http_json({
					url: "/api/tag/detail",
					method: "get",
					params: {
						tagId: this.tagId
					}
				}).then(result => {
					
					this.colorIndex = this.colorList.indexOf(result.data.color)
					this.tagName = result.data.tagName
					
				})
				
			},
			// 表单验证
			submitValidate() {
				if(!this.tagName) {
					uni.showToast({
						icon: 'none',
						title: '请输入标签名称'
					})
					return false
				} 
				
				return true
			},
			// 表单提交
			submitClick() {
				
				if(!this.submitValidate()) return
				
				if(this.mode === 'add') {
					
					// 添加标签的提交接口
					this.$http_json({
						url: "/api/tag/new",
						method: "post",
						data: {
							userId : this.$getMemoryPmt('userInfo').id,
							color: this.colorList[this.colorIndex],
							tagName: this.tagName
						}
					}).then(result => {
						console.log(result)
						
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						})
						
						setTimeout(() => {
							this.$navigateBack()
						}, 1000)
					})
					
				}
				else if(this.mode === 'update') {
					// 更新标签的提交接口
					this.$http_json({
						url: "/api/tag/update",
						method: "post",
						data: {
							tagId : this.tagId,
							color: this.colorList[this.colorIndex],
							tagName: this.tagName
						}
					}).then(result => {
						console.log(result)
						
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						
						setTimeout(() => {
							this.$navigateBack()
						}, 1000)
					})
				}				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.input_container {
		border-bottom: 4rpx solid #F7F7F7;
		padding: 14rpx 20rpx;
		
		input {
			width: 100%;
			height: 70rpx;
			font-size: 30rpx;
		}
	}

	.tag_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx 24rpx;

		.tag_item_left {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.tag_name {
				margin-left: 28rpx;
				font-size: 26rpx;
			}
		}

		.tag_item_right {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;

			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			color: #FFFFFF;
		}
	}
	
	.btn_area {
		display: flex;
		justify-content: space-between;
		padding: 34rpx 24rpx;
		
		.btn_item {
			padding: 12rpx 28rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			
		}
		
		.btn_delete {
			color: #FFFFFF;
			background-color: #E13E39;
			margin-right: 20rpx;
		}
		
		.btn_delete_hidden {
			visibility: hidden;
		}
		
		.btn_area_right {
			display: flex;
			.btn_left {
				color: #FFFFFF;
				background-color: #B6B6B6;
				margin-right: 20rpx;
			}
			
			.btn_right {
				color: #FFFFFF;
				background-color: #617FDE;
			}
		}
	}




	.popcontainer {
		width: 450rpx;
		padding: 30rpx 30rpx;
		// height: 400rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.12142857142857139);
		
		.title {
			font-size: 28rpx;
			border-bottom: 2rpx solid #F3F3F3;
			padding-bottom: 16rpx;
		}
		
		.color_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;
			
			.color_item {
				width: 48rpx;
				height: 48rpx;
				margin: 20rpx 50rpx 0 0;
				border-radius: 50%;
				
				// background-color: rgb(225,62,57);
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
			
			
			.color_item:nth-child(5n+0) {
				margin-right: 0;
			}
		}
		
		.cancel_btn_box {
			display: flex;
			justify-content: flex-end;
			margin-top: 26rpx;
			
			.cancel_btn {
				padding: 10rpx 16rpx 10rpx 30rpx;
				
				color: #617FDE;
				font-size: 24rpx;
			}
		}
	}
</style>
